<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/css/layui.css}"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
    <div class="layui-layout layui-layout-admin">

      <!--顶部导航栏-->
      <div th:replace="~{commons/commons::topber}"></div>


      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <div th:replace="~{commons/commons::sidebar(active='main.html')}"></div>


        <div class="layui-body">
          <!-- 内容主体区域 -->
          <div style="padding: 15px;">主页</div>
        </div>

      <!-- 底部固定区域 -->
      <div th:replace="~{commons/commons::footerbar}"></div>

      </div>  
               
          
      <script th:src="@{/layui.js}"></script>
      <script>
      //JS 
      layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
        ,layer = layui.layer
        ,util = layui.util
        ,$ = layui.$;
        
        //头部事件
        util.event('lay-header-event', {
          //左侧菜单事件
          menuLeft: function(othis){
            layer.msg('展开左侧菜单的操作', {icon: 0});
          }
          ,menuRight: function(){
            layer.open({
              type: 1
              ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
              ,area: ['260px', '100%']
              ,offset: 'rt' //右上角
              ,anim: 5
              ,shadeClose: true
            });
          }
        });
        
      });
      </script>

</body>
</html>